<template>
  <div>
    <p class="red">* 根据购买记录统计得出</p>
    <a-descriptions :column="1">
      <a-descriptions-item label="品类偏好">
        <a-tag color="green" v-for="(item, index) in customerInfo.topClass" :key="index">{{ item }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="材质偏好">
        <a-tag color="green" v-for="(item, index) in customerInfo.fabric" :key="index">{{ item }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="风格偏好">
        <a-tag color="green" v-for="(item, index) in customerInfo.styles" :key="index">{{ item }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="颜色偏好">
        <a-tag color="green" v-for="(item, index) in customerInfo.color" :key="index">{{ item }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="折扣偏好"> </a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script>
import { selectById } from '@/api/box/api'
export default {
  data() {
    return {
      unionId: '',
      customerInfo: {}
    }
  },
  created() {
    this.unionId = this.$route.params.id
    this.fetchUserInfo()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    fetchUserInfo() {
      selectById(this.unionId, '').then(res => {
        if (res.code == 0) {
          this.customerInfo = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.red {
  color: #f5222d;
}
</style>

